<template>
    <div class="home_page_class">
        <div class="card_div_class">
            <div style="display: flex; font-weight: bold; align-items: center">
                <div class="dots_class"></div>
                <div style="margin-left: 2px">风险总统计</div>
            </div>
            <canvas id="container" />
        </div>
        <div class="card_div_class" style="margin-top: 12px">
            <div style="display: flex; justify-content: space-between; align-items: center">
                <div style="display: flex; font-weight: bold; align-items: center">
                    <div class="dots_class"></div>
                    <div style="margin-left: 2px">风险月份统计</div>
                </div>
                <div style="display: flex; align-items: center" @click="monthDataShow = true">
                    {{ monthData }}<van-icon name="arrow-down" style="margin-left: 4px" />
                </div>
            </div>
            <canvas id="monthContainer" />
        </div>
        <div class="card_div_class" style="margin-top: 12px">
            <div style="display: flex; justify-content: space-between; align-items: center">
                <div style="display: flex; font-weight: bold; align-items: center">
                    <div class="dots_class"></div>
                    <div style="margin-left: 2px">风险日期统计</div>
                </div>
                <div style="display: flex; align-items: center" @click="dayDataShow = true">
                    {{ dayData }}<van-icon name="arrow-down" style="margin-left: 4px" />
                </div>
            </div>
            <canvas id="dayContainer" />
        </div>
        <van-popup v-model="dayDataShow" position="bottom">
            <van-datetime-picker
                v-model="dayData"
                type="date"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="dayDataShow = false"
                @confirm="confirmDayPicker"
            />
        </van-popup>
        <van-popup v-model="monthDataShow" position="bottom">
            <van-datetime-picker
                v-model="monthData"
                type="year-month"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="monthDataShow = false"
                @confirm="confirmMonthPicker"
            />
        </van-popup>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import F2 from "@antv/f2/lib/index-all";
export default {
    name: "Home",
    data() {
        return {
            monthData: "",
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            monthDataShow: false,
            dayData: "",
            dayDataShow: false
        };
    },
    computed: {
        ...mapGetters([])
    },
    mounted() {
        this.monthData = this.$moment(new Date()).format("yyyy年MM月");
        this.dayData = this.$moment(new Date()).format("yyyy年MM月DD日");
        this.initPixelChart();
        this.initMonthChart();
        this.initDayChart();
    },
    components: {},
    methods: {
        confirmMonthPicker: function () {
            this.monthData = this.$moment(this.monthData).format("yyyy年MM月");
            this.monthDataShow = false;
        },
        confirmDayPicker: function () {
            this.dayData = this.$moment(this.dayData).format("yyyy年MM月DD日");
            this.dayDataShow = false;
        },
        initDayChart: function () {
            const data = [
                { name: "极低风险", sold: 100 },
                { name: "低风险", sold: 20 },
                { name: "中等风险", sold: 10 },
                { name: "高风险", sold: 2 },
                { name: "极高风险", sold: 0 }
            ];

            const chart = new F2.Chart({
                id: "dayContainer",
                height: 200,
                pixelRatio: window.devicePixelRatio,
                aria: true, // 开启无障碍描述生成
                title: "销量" // 图表标题，可被无障碍识别
            });

            chart.source(data);

            chart
                .interval()
                .position("name*sold")
                .color("name", ["#52c41a", "#409EFF", "#ffec3d", "#fa8c16", "#820014"]);

            chart.render();
        },
        initMonthChart: function () {
            const data = [
                { name: "极低风险", sold: 100 },
                { name: "低风险", sold: 20 },
                { name: "中等风险", sold: 10 },
                { name: "高风险", sold: 2 },
                { name: "极高风险", sold: 0 }
            ];

            const chart = new F2.Chart({
                id: "monthContainer",
                height: 200,
                pixelRatio: window.devicePixelRatio,
                aria: true, // 开启无障碍描述生成
                title: "销量" // 图表标题，可被无障碍识别
            });

            chart.source(data);

            chart
                .interval()
                .position("name*sold")
                .color("name", ["#52c41a", "#409EFF", "#ffec3d", "#fa8c16", "#820014"]);

            chart.render();
        },
        initPixelChart: function () {
            const data = [
                {
                    name: "极低风险",
                    percent: 100,
                    a: "1"
                },
                {
                    name: "低风险",
                    percent: 22,
                    a: "1"
                },
                {
                    name: "中等风险",
                    percent: 11,
                    a: "1"
                },
                {
                    name: "高风险",
                    percent: 33,
                    a: "1"
                },
                {
                    name: "极高风险",
                    percent: 5,
                    a: "1"
                }
            ];

            const map = {};
            data.forEach(function (obj) {
                map[obj.name] = obj.percent;
            });

            const chart = new F2.Chart({
                width: 320,
                height: 200,
                id: "container",
                pixelRatio: window.devicePixelRatio,
                padding: [0, "auto"]
            });
            chart.source(data);
            chart.tooltip(false);
            chart.legend({
                position: "right",
                nameStyle: {
                    fill: "#333",
                    fontWeight: "bold" // 图例项 value 值文本样式
                },
                marker: {
                    symbol: "square", // marker 的形状
                    radius: 5 // 半径大小
                },
                itemFormatter: function itemFormatter(val) {
                    return val + "    " + map[val];
                }
            });
            chart.coord("polar", {
                transposed: true,
                innerRadius: 0.7,
                radius: 0.85
            });
            chart.axis(false);
            chart
                .interval()
                .position("a*percent")
                .color("name", ["#52c41a", "#409EFF", "#ffec3d", "#fa8c16", "#820014"])
                .adjust("stack");

            chart.guide().html({
                position: ["50%", "45%"],
                html: `<div style="width: 250px;height: 40px;text-align: center;margin-top: 12px;color: #333333">
      <div style="font-size: 12px">总风险</div>
      <div style="font-size: 14px">167个</div>
    </div>`
            });
            chart.render();
        }
    }
};
</script>
<style scoped lang="less">
.home_page_class {
    width: 100%;
    height: 100%;
    padding: 20px 10px 80px 10px;
}
.home_page_class .card_div_class {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    padding: 12px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: 0.3s;
}
.dots_class {
    width: 10px;
    height: 10px;
    background: #409eff;
    border-radius: 50%;
    margin: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dots_class:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #409eff;
    opacity: 0.7;
    animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);
    animation-delay: 200ms;
    transition: 0.5s all ease;
    transform: scale(1);
}
@keyframes scale {
    0% {
        transform: scale(1);
    }
    50%,
    75% {
        transform: scale(2.5);
    }
    78%,
    100% {
        opacity: 0;
    }
}
</style>
